<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>谷粒学院</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .thumbnail h4 {
      margin-top: 0px;
    }

    .related-links{
      background-color: #333;
      color: white;
      padding: 40px;
    }

    .h-10{
      height: 10px
    }
    .h-20{
      height: 20px;
    }
    .h-50{
      height: 50px;
    }
    .copyright{
      background: #222;
      color: white;
      padding: 30px 0px;
    }
  </style>
</head>

<body>
  <!-- 顶部导航条 -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
          <li><a href="#">谷粒学院</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
              aria-expanded="false">前端 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Vue</a></li>
              <li><a href="#">React</a></li>
              <li><a href="#">Angular</a></li>
              <li><a href="#">Node.js</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
              aria-expanded="false">后端 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Java</a></li>
              <li><a href="#">Go</a></li>
              <li><a href="#">Python</a></li>
              <li><a href="#">PHP</a></li>
              <li><a href="#">C++</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-left">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入您的关键字">
          </div>
          <button type="submit" class="btn btn-default">搜索</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">站内信 <span class="badge">4</span></a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
              aria-expanded="false">用户中心 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">更新个人资料</a></li>
              <li><a href="#">我的订单</a></li>
              <li><a href="#">我的购物车</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">退出</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

  <!-- 主体内容 -->
  <div class="container">
    <!-- 提示框 -->
    <div class="alert alert-success alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
      欢迎回来~~~
    </div>

    <!-- 巨幕提醒 -->
    <div class="jumbotron">
      <h2>尚硅谷全套视频教程</h2>
      <p>尚硅谷, 让天下没有学完的技术</p>
      <p><a class="btn btn-primary btn-sm" href="#" role="button">立即起航</a></p>
    </div>

    <!-- 路径导航 -->
    <ol class="breadcrumb">
      <li>
        <h3><a href="#">首页</a></h3>
      </li>
      <li><a href="#">热门课程</a></li>
    </ol>

    <!-- 热门课程列表 -->
    <div class="row">
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="thumbnail">
          <img src="holder.js/100px200?bg=#acb" alt="...">
          <div class="caption">
            <h4>HTML + CSS基础</h4>
            <p>网页开发基础，WEB 开发必备技能</p>
            <p><span class="label label-success">基础</span></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="thumbnail">
          <img src="holder.js/100px200?bg=#acb" alt="...">
          <div class="caption">
            <h4>HTML + CSS基础</h4>
            <p>网页开发基础，WEB 开发必备技能</p>
            <p><span class="label label-success">基础</span></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="thumbnail">
          <img src="holder.js/100px200?bg=#acb" alt="...">
          <div class="caption">
            <h4>HTML + CSS基础</h4>
            <p>网页开发基础，WEB 开发必备技能</p>
            <p><span class="label label-success">基础</span></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="thumbnail">
          <img src="holder.js/100px200?bg=#acb" alt="...">
          <div class="caption">
            <h4>HTML + CSS基础</h4>
            <p>网页开发基础，WEB 开发必备技能</p>
            <p><span class="label label-success">基础</span></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="thumbnail">
          <img src="holder.js/100px200?bg=#acb" alt="...">
          <div class="caption">
            <h4>HTML + CSS基础</h4>
            <p>网页开发基础，WEB 开发必备技能</p>
            <p><span class="label label-success">基础</span></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="thumbnail">
          <img src="holder.js/100px200?bg=#acb" alt="...">
          <div class="caption">
            <h4>HTML + CSS基础</h4>
            <p>网页开发基础，WEB 开发必备技能</p>
            <p><span class="label label-success">基础</span></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="thumbnail">
          <img src="holder.js/100px200?bg=#acb" alt="...">
          <div class="caption">
            <h4>HTML + CSS基础</h4>
            <p>网页开发基础，WEB 开发必备技能</p>
            <p><span class="label label-success">基础</span></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="thumbnail">
          <img src="holder.js/100px200?bg=#acb" alt="...">
          <div class="caption">
            <h4>HTML + CSS基础</h4>
            <p>网页开发基础，WEB 开发必备技能</p>
            <p><span class="label label-success">基础</span></p>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页结构 -->
    <nav aria-label="Page navigation">
      <ul class="pagination  pull-right">
        <li>
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
    <div class="clearfix"></div>
    <!-- 合作企业 -->
    <h2 class="page-header">合作企业</h2>
    <div class="row">
      <div class="col-lg-3">
        <img src="holder.js/100px200?bg=#456" alt="">
      </div>
      <div class="col-lg-3">
        <img src="holder.js/100px200?bg=#456" alt="">
      </div>
      <div class="col-lg-3">
        <img src="holder.js/100px200?bg=#456" alt="">
      </div>
      <div class="col-lg-3">
        <img src="holder.js/100px200?bg=#456" alt="">
      </div>
    </div>
  </div>

  <div class="h-50"></div>
  <!-- 底部相关链接 -->
  <div class="related-links text-center">
    <div class="container">
      <dl class="col-lg-3">
        <dt><h4>新手入门</h4></dt>
        <dd>用户注册</dd>
        <dd>用户登录</dd>
        <dd>找回密码</dd>
      </dl>
      <dl class="col-lg-3">
        <dt><h4>新手入门</h4></dt>
        <dd>用户注册</dd>
        <dd>用户登录</dd>
        <dd>找回密码</dd>
      </dl>
      <dl class="col-lg-3">
        <dt><h4>新手入门</h4></dt>
        <dd>用户注册</dd>
        <dd>用户登录</dd>
        <dd>找回密码</dd>
      </dl>
      <dl class="col-lg-3">
        <dt><h4>新手入门</h4></dt>
        <dd>用户注册</dd>
        <dd>用户登录</dd>
        <dd>找回密码</dd>
      </dl>
    </div>
  </div>

  <!-- 底部版权声明 -->
  <div class="copyright text-center">
    ©2022 课程版权均归谷粒学院所有 京ICP备17055252号
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/holder/2.9.8/holder.js"></script>
</body>

</html>